<template>
    <div>
        <div class="order-body" v-loading="loading">
            <div class="no-pay-box" v-if="info.state == 1">
                <div class="on-pay-left-box on-pay-blue" v-if="info.total_price > 0">
                    待支付
                </div>
                <div class="on-pay-right-box text-orange" v-if="info.total_price > 0">
                    您的订单将与{{str}}后失效，请尽快支付~
                </div>
                <div class="on-pay-left-box on-pay-blue" v-if="info.total_price == 0">
                    待确认
                </div>
                <div class="on-pay-right-box text-orange" v-if="info.total_price == 0">
                    您的订单将与{{str}}后失效，请尽快点击确认提交到保司~
                </div>
            </div>
            <div class="no-pay-box" v-if="info.state == 0">
                <div class="on-pay-left-box on-pay-grey">
                    已取消
                </div>
                <div class="on-pay-right-box text-grey">
                    您的订单已取消~
                </div>
            </div>
            <div class="no-pay-box" v-if="info.state == 2">
                <div class="on-pay-left-box on-pay-green">
                    已支付
                </div>
                <div class="on-pay-right-box text-grey">
                    批增人员{{info.inc_num}}人，批减人员{{info.dec_num}}人~
                </div>
            </div>
            <div class="title-box">批单详情</div>
            <div class="info-box" v-loading="load">
                <el-row :gutter="10">
                 <el-col :span="12">
                     <div class="info-item-box"><span class="info-title-box">保单号：</span><span>{{info.order_no}}</span></div>
                 </el-col>
                 <el-col :span="12">
                     <div class="info-item-box"><span class="info-title-box">批单号：</span><span>{{info.pd_no ? info.pd_no : '----'}}</span></div>
                 </el-col>
                 <el-col :span="12">
                     <div class="info-item-box"><span class="info-title-box">生效时间：</span><span>{{info.start_time}}</span></div>
                 </el-col>
                 <el-col :span="12">
                     <div class="info-item-box"><span class="info-title-box">失效时间：</span><span>{{info.end_time}}</span></div>
                 </el-col>
                 <el-col :span="12">
                     <div class="info-item-box"><span class="info-title-box">合计保费：</span><span>{{info.total_price}}</span></div>
                 </el-col>
                 <el-col :span="12">
                     <div class="info-item-box"><span class="info-title-box">批改时间：</span><span>{{info.create_time}}</span></div>
                 </el-col>
                 <el-col :span="12" v-if="info.url">
                     <div class="info-item-box"><span class="info-title-box">批改下载：</span><a :href="info.url" target="_blank">点击下载</a></div>
                 </el-col>
                </el-row>
            </div>
            <div class="title-box">发票信息</div>
            <div class="info-box" v-if="info.invoice">
                <el-row :gutter="10">
                    <el-col :span="12">
                        <div class="info-item-box"><span class="info-title-box"> 纳税人名称：</span><span>{{info.invoice.invoice_name}}</span></div>
                    </el-col>
                    <el-col :span="12">
                        <div class="info-item-box"><span class="info-title-box">纳税人识别号：</span><span>{{info.invoice.invoice_no}}</span></div>
                    </el-col>
                    <el-col :span="12">
                        <div class="info-item-box"><span class="info-title-box">发票类型：</span><span>{{info.invoice.invoice_type == 1 ? '专票' : '普票'}}</span></div>
                    </el-col>
                    <el-col :span="12" v-if="info.invoice.invoice_type == 1">
                        <div class="info-item-box"><span class="info-title-box">税务登记地址：</span><span>{{info.invoice.invoice_address}}</span></div>
                    </el-col>
                    <el-col :span="12" v-if="info.invoice.invoice_type == 1">
                        <div class="info-item-box"><span class="info-title-box">税务登记联系电话：</span><span>{{info.invoice.invoice_mobile}}</span></div>
                    </el-col>
                    <el-col :span="12" v-if="info.invoice.invoice_type == 1">
                        <div class="info-item-box"><span class="info-title-box">税务登记银行名称：</span><span>{{info.invoice.invoice_bank}}</span></div>
                    </el-col>
                    <el-col :span="12" v-if="info.invoice.invoice_type == 1">
                        <div class="info-item-box"><span class="info-title-box">税务登记银行账号：</span>{{info.invoice.invoice_bank_no}}</div>
                    </el-col>
                    <el-col :span="12" v-if="info.state == 2 && info.invoice.invoice_type == 2 && info.total_price > 0">
                        <div class="info-item-box"><span class="info-title-box">发票文件：</span>
                            <el-button type="text" size="mini" icon="el-icon-search" @click="getInvoice()" v-if="!info.fp_url">获取电子发票</el-button>
                            <a :href="info.fp_url" download="电子发票" v-else><el-button type="text" size="mini" icon="el-icon-download">下载电子发票</el-button></a>
                        </div>
                    </el-col>
                </el-row>
            </div>
            <div class="title-box">批改人员列表</div>
            <el-tabs v-model="form.type" @tab-click="handleClick">
                <el-tab-pane label="批增人员" name="1"></el-tab-pane>
                <el-tab-pane label="批减人员" name="2"></el-tab-pane>
            </el-tabs>
            <el-table size="mini" :data="list.data" border v-loading="loading">
                <el-table-column label="姓名" prop="name" ></el-table-column>
                <el-table-column label="身份证号" prop="id_card" ></el-table-column>
                <el-table-column label="生效日期" prop="start_time" ></el-table-column>
                <el-table-column label="失效日期" prop="end_time" ></el-table-column>
                <el-table-column label="保单金额" prop="price" ></el-table-column>
            </el-table>
            <div class="page-box">
                <el-pagination
                        background
                        small
                        :current-page="list.current_page"
                        :page-size="list.per_page"
                        layout="total, prev, pager, next, jumper"
                        :total="list.total"
                        @current-change="changePage"
                ></el-pagination>
            </div>
            <div class="detail-footer-box" v-if="info.state == 1">
                <div class="footer-text-box">
                    <span class="text-grey">批增人员{{info.inc_num}}人，批减人员{{info.dec_num}}人</span>
                    <span class="total-price-box">合计保费：{{info.total_price}}元</span>
                </div>
                <div class="footer-btn-box">
                    <el-button size="small" style="width: 100px" @click="cancel()">取消</el-button>
                    <span v-if="info.total_price > 0">
                        <el-button type="primary" size="small" style="width: 100px" @click="payDo(1)">在线支付</el-button>
                        <el-button type="primary" size="small" style="width: 100px" @click="payDo(2)">线下支付</el-button>
                    </span>
                    <el-button type="primary" size="small" v-else style="width: 100px" @click="nopay()">确认提交到保司</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data(){
            return {
                form:{
                    id:'',
                    type:'1',
                    page:1,
                },
                loading:true,
                load:true,
                list:{
                    current_page : 1,
                    data:[]
                },
                info:{
                    invoice:{},
                    state:1,
                },
                str:"00小时00分00秒",
                timer:'',
            }
        },
        mounted() {
            this.form.id = this.$route.params.id;
            this.getData();
            this.getInfo();
        },
        methods:{
            getInvoice() {
                console.log(this.id);
                this.loading = true;
                this.ajaxs('order/changeInvoice',{
                    data:{id:this.form.id},
                    success:(res)=>{
                        this.loading = false;
                        if(res.code){
                            this.getData();
                        }
                        this.toast(res.code,res.msg);
                    }
                })
            },
            getData() {
                this.loading = true;
                this.ajaxs('order/getEndorseUser',{
                    data:this.form,
                    success:(res) => {
                        this.list = res.msg;
                        this.loading = false;
                    }
                })
            },
            getInfo() {
                this.load = true;
                this.ajaxs('order/getEndorseInfo',{
                    data:this.form,
                    success:(res) => {
                        this.info = res.msg;
                        this.load = false;
                        this.setTime(this.info.num);
                    }
                })
            },
            changePage(e){
                this.form.page = e;
                this.getData();
            },
            handleClick(){
                this.form.page = 1;
                this.getData();
            },
            setTime(num){
                console.log(num);
                var h = 0;
                var m = 0;
                var s = 0;
                this.timer = setInterval(()=>{
                    if(num > 0) {
                        num --;
                        h = Math.floor(num / 3600);
                        m = Math.floor((num % 3600) / 60);
                        s = Math.floor((num % 3600) % 60);
                        this.str = (h < 10 ? "0"+h : h)+'小时'+(m < 10 ? "0"+m : m)+'分钟'+(s < 10 ? "0"+s : s)+'秒';
                    } else {
                        clearInterval(this.timer);
                        //请求数据取消订单
                        this.ajaxs('order/cancelEndorse',{
                            data:{id:this.form.id},
                            success:(res) => {
                                if(res.code){
                                    this.getInfo();
                                }
                            }
                        })
                    }
                },1000);
            },
            cancel(){
                this.ajaxs('order/cancelEndorse',{
                    data:{id:this.form.id},
                    success:(res) => {
                        this.toast(res.code,res.msg);
                        if(res.code){
                            this.getInfo();
                        }
                    }
                })
            },
            nopay(){
                this.ajaxs('order/updateOrderNoPay',{
                    data:{id:this.form.id},
                    success:(res) => {
                        if(res.code){
                            this.getInfo();
                        }else{
                            this.toast(res.code,res.msg);
                        }
                    }
                })
            },
            payDo(type){
                this.ajaxs('order/updateOrderPay',{
                    data:{id:this.form.id,type:type},
                    success:(res) => {
                        if(res.code){
                            window.open(res.msg);
                        }else{
                            this.toast(res.code,res.msg);
                        }
                    }
                })
            },
        },
        watch(){
            if(this.$route.params.id){
                this.form.id = this.$route.params.id;
                this.getData();
                this.getInfo();
            }
        },
    }
</script>

<style scoped>
    @import "../../assets/css/order/endorse.css";
</style>
